<template>
  <!-- 数据清洗/数据清洗转换/映射管理 -->
  <div class="ysgl">
    <el-row v-show="!isAdd">
      <div class="tree-left">
        <el-input
          placeholder="输入关键字进行过滤"
          suffix-icon="el-icon-search"
          v-model="filterText"
        >
        </el-input>
        <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          ref="tree"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>
      <div class="table-right">
        <div class="search">
          <el-input
            class="search-input"
            v-model="searchInput"
            placeholder="编码、名称"
          ></el-input>
          <el-button class="el-btn" type="primary">查询</el-button>
          <el-button class="add-btn" type="primary" @click="fnAdd"
            >新增</el-button
          >
        </div>
        <div class="el-table">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            max-height="700px"
          >
            <el-table-column prop="name" label="映射名称"> </el-table-column>
            <el-table-column prop="xh" label="映射类型"> </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="ren" label="创建人"> </el-table-column>
            <el-table-column prop="cjtime" width="180" label="创建时间">
            </el-table-column>
            <el-table-column prop="xgtime" width="180" label="修改时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <span
                    style="
                      display: inline-block;
                      margin-right: 20px;
                      color: #409eff;
                    "
                    @click="handleEdit(scope.$index, scope.row, 0)"
                  >
                    <i class="el-icon-edit"></i
                  ></span>
                </el-tooltip>

                <!-- 查看 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看"
                  placement="bottom"
                >
                  <span
                    style="
                      display: inline-block;
                      margin-right: 20px;
                      color: #409eff;
                    "
                    @click="handleEdit(scope.$index, scope.row, 1)"
                  >
                    <i class="el-icon-view"></i
                  ></span>
                </el-tooltip>
                <!-- 删除 -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <span
                    style="color: #409eff"
                    @click="handleEdit(scope.$index, scope.row, 2)"
                  >
                    <i class="el-icon-delete"></i
                  ></span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-row>
    <el-row v-if="isAdd">
      <ysgl-g6
        @isShowG6DialogFn="isShowG6DialogFn"
        ref="g6Ref"
        :g6Data="currentG6Data"
        :currentG6Type="currentG6Type"
      />
    </el-row>
  </div>
</template>

<script>
const AAA = [
  {
    liuchengName: "流程001",
    status: "已提交",
    runLog: "手动启动",
    user: "张飒",
    createTime: "2016-15-51",
    editTime: "2022-11-55",
    g6Obj: {
      nodes: [
        {
          id: "流程001的开始",
          label: "源",
          img: require("@/assets/gzlgl/start.png"),
        },
        {
          id: "流程001的结束",
          label: "筛选器",
          img: require("@/assets/gzlgl/001.png"),
        },
      ],
      edges: [
        {
          source: "流程001的开始",
          target: "流程001的结束",
        },
      ],
    },
  },
  {
    liuchengName: "流程002",
    status: "已提交",
    runLog: "手动启动",
    user: "张飒",
    createTime: "2016-15-51",
    editTime: "2022-11-55",
    g6Obj: {
      nodes: [
        {
          id: "流程002的开始",
          label: "源",
          img: require("@/assets/gzlgl/start.png"),
        },
        {
          id: "流程002的中转",
          label: "汇总",
          img: require("@/assets/gzlgl/002.png"),
        },
        {
          id: "流程002的结束",
          label: "IF",
          img: require("@/assets/gzlgl/005.png"),
        },
      ],
      edges: [
        {
          source: "流程002的开始",
          target: "流程002的中转",
        },
        {
          source: "流程002的中转",
          target: "流程002的结束",
        },
      ],
    },
  },
];
import ysglG6 from "./ysglG6Main.vue";
export default {
  components: {
    ysglG6,
  },
  data() {
    return {
      currentG6Data: {},
      currentG6Type: "",
      isAdd: false, // 是否点击新增按钮
      filterText: "", //表格查询
      searchInput: "", //表格查询
      defaultProps: {
        children: "children",
        label: "label",
      },
      //树形结构tree
      treeData: [
        {
          label: "映射列表",
          value: 1,
          children: [
            {
              label: "xxx",
              value: 2,
              children: [
                {
                  label: "xxx",
                  value: 3,
                  children: [
                    {
                      label: "xxx",
                      value: 4,
                    },
                    {
                      label: "xxx",
                      value: 5,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      // 表格数据
      tableData: [],
      //向拖拽组件传递的参数
      dataNum: "",
    };
  },
  methods: {
    // 点击新增
    fnAdd() {
      this.isAdd = true;
      this.currentG6Data = {};
      this.currentG6Type = "edit";
    },
    // 树形节点点击事件
    handleNodeClick(data) {
      if (data.value == 3) {
        this.tableData = [
          {
            xh: 1,
            name: "1_ss",
            status: "已提交",
            tj: "1",
            ren: "张三",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
          {
            xh: 2,
            name: "2_ss",
            status: "已提交",
            tj: "1",
            ren: "李四",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
          {
            xh: 3,
            name: "3_ss",
            status: "已提交",
            tj: "1",
            ren: "王五",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
          {
            xh: 4,
            name: "4_ss",
            status: "已提交",
            tj: "1",
            ren: "张六",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
        ];
      }
      if (data.value == 4) {
        this.tableData = [
          {
            xh: 1,
            name: "1_ss",
            status: "已提交",
            tj: "1",
            ren: "张三",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
          {
            xh: 2,
            name: "2_ss",
            status: "已提交",
            tj: "1",
            ren: "李四",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
        ];
      }
      if (data.value == 5) {
        this.tableData = [
          {
            xh: 3,
            name: "3_ss",
            status: "已提交",
            tj: "1",
            ren: "王五",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
          {
            xh: 4,
            name: "4_ss",
            status: "已提交",
            tj: "1",
            ren: "张六",
            cjtime: "2022-02-20 11:07:30",
            xgtime: "2022-02-20 11:07:30",
            g6Obj: {
              nodes: [
                {
                  id: "流程001的开始",
                  label: "Circle1",
                  img: "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000",
                },
                {
                  id: "流程001的结束",
                  label: "Circle2",
                  img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=3056bd3be5b3739e969c845edf183ee7",
                },
              ],
              edges: [
                {
                  source: "流程001的开始",
                  target: "流程001的结束",
                },
              ],
            },
          },
        ];
      }
    },
    isShowG6DialogFn(flag) {
      this.isAdd = flag;
    },

    handleEdit(index, row, num) {
      // 编辑
      if (num == 0) {
        if (index % 2 === 0) {
          this.currentG6Data = AAA[0].g6Obj;
        } else {
          this.currentG6Data = AAA[1].g6Obj;
        }
        this.currentG6Type = "edit";
        this.isAdd = true;
        this.dataNum = 0;
      }
      // 查看
      if (num == 1) {
        if (index % 2 === 0) {
          this.currentG6Data = AAA[0].g6Obj;
        } else {
          this.currentG6Data = AAA[1].g6Obj;
        }
        this.currentG6Type = "watch";
        this.isAdd = true;
        this.dataNum = 1;
      }
      // 删除
      if (num == 2) {
        // 删除
        this.$message({
          message: "删除成功！",
          type: "success",
        });
      }
    },
    isAddFn(data) {
      this.isAdd = data;
    },
  },
};
</script>

<style lang="less" scoped>
.ysgl {
  .tree-left {
    float: left;
    width: 20%;
    .filter-tree {
      height: 800px;
      // overflow-y: scroll;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
  .table-right {
    float: left;
    width: 79%;
    height: 100%;

    .search {
      margin-bottom: 20px;
      margin-left: 20px;
      .search-input {
        width: 300px;
        border-radius: 0;
        input {
          border-radius: 0;
        }
      }
      .el-btn {
        margin-left: 0px;
        border-radius: 0;
      }
      .add-btn {
        float: right;
      }
    }
    .el-table {
      margin-left: 10px;
    }
  }
}
</style>
